<template>
  <h3>watchEffect</h3>
  <p>{{ name }} {{ age }}</p>
  <p>xusuiRef {{ xusuiRef }}</p>

  <p>scoreRef {{ scoreRef }}</p>
  <p>wife {{ wife }}</p>
  <button @click="stopHandler">停止侦听老娘</button>
</template>

<script>
import { ref, reactive, computed, toRefs, watch, watchEffect } from "vue";

export default {
  name: "WatchEffect",

  setup() {
    const scoreRef = ref(60);

    const state = reactive({
      name: "张三",
      age: 20,
      wife: {
        money: 123,
        friends: ["老王", "西门大官人"],
      },
    });

    const xusuiRef = computed(() => state.age + 1);
    setInterval(() => {
      state.age++;
      scoreRef.value++;
      state.wife.money++;
    }, 1000);

    // setTimeout(() => {
    //   state.wife.friends.push("东门大官人");
    // }, 3000);

    /* 监听单个数据 */

    // 侦听ref响值
    // watch(
    //   // 侦听的数据来源
    //   scoreRef, //ref的地址是不会变的 侦听的是地址内值的变化

    //   // 数据变化时的回调
    //   (newScore, oldScore) => {
    //     console.log("scoreRef changed", newScore, oldScore);
    //   }
    // );

    /* 侦听响对中的一个value */
    // watch(
    //   // 写成getter函数形式
    //   () => state.age,

    //   // 数据变化时的回调
    //   (value, oldValue) => {
    //     console.log("age changed", value, oldValue);
    //   }
    // );

    /* 深度监听 */
    const stopHandler = watch(
      // 第一个参数，确定要监听哪个属性
      () => state.wife,

      // 第二个参数，回调函数
      (value, oldValue) => {
        console.log("wife有了新的动向", value, oldValue);
      },

      // 第三个参数，配置项
      {
        immediate: true, // 首次渲染，即刻回调
        deep: true, // 深度监听
      }
    );

    return {
      ...toRefs(state),
      xusuiRef,
      scoreRef,
      stopHandler,
    };
  },

  // data(){
  //   return {
  //     age2:20
  //   }
  // },
  // computed:{
  //   xusui2(){
  //     return this.age2 + 1
  //   }
  // }
};
</script>
